<!DOCTYPE html>
<html lang="zh-CN">

<!-- Mirrored from www.mdui.org/docs/jq by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 22 Jan 2022 13:01:48 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=5.0">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <title>JavaScript 工具库 - MDUI 开发文档, Material Design 前端框架</title>
  <meta name="description" content="currentItem.description" />
  <link rel="preconnect" href="http://cdn.w3cbus.com/">
  <link rel="stylesheet" href="../../cdn.w3cbus.com/library/mdui/1.0.2/css/mdui.min.css"><link rel="stylesheet" href="../../cdn.w3cbus.com/mdui/docs_1/static/index.0132e177.css">
  
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '../../www.googletagmanager.com/gtm5445.html?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-K3T2R6S');</script>
  <!-- End Google Tag Manager -->
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"mdui官网","item":"https://www.mdui.org"},{"@type":"ListItem","position":2,"name":"mdui v1文档","item":"https://www.mdui.org/docs/"},{"@type":"ListItem","position":3,"name":"JavaScript 工具库"}]}</script>
  <script async src="../../pagead2.googlesyndication.com/pagead/js/adsbygooglee7db.js?client=ca-pub-4466345895756968" crossorigin="anonymous"></script>
</head>
<body
  class="
    mdui-drawer-body-left
    mdui-appbar-with-toolbar
    mdui-theme-primary-indigo
    mdui-theme-accent-pink
    mdui-theme-layout-auto"
  id="p-d"
>
<header class="appbar mdui-appbar mdui-appbar-fixed">
  <div class="mdui-toolbar mdui-color-theme">
    <span
      class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
      mdui-drawer="{target: '#main-drawer', swipe: true}"
    >
      <i class="mdui-icon material-icons">menu</i>
    </span>
    <a href="https://www.mdui.org/" class="mdui-typo-headline mdui-hidden-xs">MDUI</a>
    <a href="index.html" class="mdui-typo-title">文档</a>
    <div class="mdui-toolbar-spacer"></div>
    <span
      class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
      mdui-dialog="{target: '#dialog-docs-theme'}"
      mdui-tooltip="{content: '设置主题'}"
    >
      <i class="mdui-icon material-icons">color_lens</i>
    </span>
    <a
      href="https://github.com/zdhxiong/mdui"
      target="_blank"
      class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
      mdui-tooltip="{content: '查看 Github'}"
    >
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;">
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
      </svg>
    </a>
  </div>
</header>
<div class="mdui-drawer" id="main-drawer">
  <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
    <div class="
          mdui-collapse-item
          mdui-collapse-item-open"
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-blue"
            >near_me</i>
            <div class="mdui-list-item-content">开始使用</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="introduction.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >简介</a><a
                  href="download.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >下载</a><a
                  href="compatibility.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >兼容性</a><a
                  href="jq.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    mdui-list-item-active"
                >JavaScript 工具库</a><a
                  href="global.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >JavaScript 全局方法</a><a
                  href="migration.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >从 0.4.3 升级到 1.0.0</a>
          </div>
        </div><div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-deep-orange"
            >layers</i>
            <div class="mdui-list-item-content">样式</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="color.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >颜色与主题</a><a
                  href="font.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >字体</a><a
                  href="grid.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >网格布局</a><a
                  href="typo.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >排版</a><a
                  href="icon.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >图标</a><a
                  href="media.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >媒体</a><a
                  href="helper.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >辅助类</a><a
                  href="shadow.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >阴影</a>
          </div>
        </div><div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-green"
            >widgets</i>
            <div class="mdui-list-item-content">组件</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="ripple.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >涟漪动画效果</a><a
                  href="button.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >按钮</a><a
                  href="fab.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >浮动操作按钮</a><a
                  href="select.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >下拉选择</a><a
                  href="divider.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >分隔线</a><a
                  href="panel.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >可扩展面板</a><a
                  href="textfield.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >文本框</a><a
                  href="selection_control.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >选择控件</a><a
                  href="slider.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >滑块</a><a
                  href="list.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >列表</a><a
                  href="list_control.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >列表控制</a><a
                  href="grid_list.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >网格列表</a><a
                  href="tab.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Tab 选项卡</a><a
                  href="toolbar.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >工具栏</a><a
                  href="appbar.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >应用栏</a><a
                  href="drawer.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >抽屉式导航</a><a
                  href="bottom_nav.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >底部导航栏</a><a
                  href="card.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >卡片</a><a
                  href="chip.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >纸片</a><a
                  href="tooltip.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >工具提示</a><a
                  href="snackbar.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Snackbar</a><a
                  href="table.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >表格</a><a
                  href="dialog.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >对话框</a><a
                  href="menu.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >菜单</a><a
                  href="progress.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >进度指示器</a>
          </div>
        </div><div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-brown"
            >view_carousel</i>
            <div class="mdui-list-item-content">JavaScript 插件</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="collapse.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Collapse</a><a
                  href="headroom.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Headroom</a>
          </div>
        </div><div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-purple"
            >local_mall</i>
            <div class="mdui-list-item-content">资源</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="material_icon.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Material 图标</a>
          </div>
        </div>
  </div>
</div>
<a id="anchor-top"></a>


<div class="container p-jq mdui-container">
  <h1 class="title mdui-text-color-theme">JavaScript 工具库</h1>
  <div class="intro mdui-typo">
    <p>MDUI 内置了一个轻量的 JavaScript 工具库，它拥有和 jQuery 类似的 api 和 jQuery 风格的链式调用，但体积仅为 jQuery 的六分之一。</p>
    <p>你可以通过 <code>mdui.$</code> 来调用该库，但最好把 <code>mdui.$</code> 存储到一个简短的变量中以方便调用，例如：</p>
    <pre><code class="language-js">var $ = mdui.$;</code></pre>
    <p>在后面的文档中，都使用 <code>$</code> 来表示 <code>mdui.$</code>。</p>

    <ins class="adsbygoogle"
  style="display:block;margin-top: 40px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="3103002934"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
  </div>

  <nav class="toc mdui-text-color-theme">
    <ul>
      <li><a href="#jq-core">核心</a></li>
      <li><a href="#jq-plugin">插件编写</a></li>
      <li><a href="#jq-url">URL</a></li>
      <li><a href="#jq-array">数组和对象操作</a></li>
      <li><a href="#jq-type">数据类型判断</a></li>
      <li><a href="#jq-obj">对象访问</a></li>
      <li><a href="#jq-class">CSS 类</a></li>
      <li><a href="#jq-attr">节点属性</a></li>
      <li><a href="#jq-data">数据存储</a></li>
      <li><a href="#jq-style">样式</a></li>
      <li><a href="#jq-selector">查找节点</a></li>
      <li><a href="#jq-dom">节点操作</a></li>
      <li><a href="#jq-form">表单</a></li>
      <li><a href="#jq-event">事件</a></li>
      <li><a href="#jq-ajax">AJAX</a></li>
      <li><a href="#jq-other">更多常用方法</a></li>
    </ul>
  </nav>

  <div class="chapter">
    <div class="mdui-typo">
      <h2 class="chapter-title chapter-title-first mdui-text-color-theme">核心 <a class="anchor" id="jq-core"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>$()</code></td>
            <td>
              <p>该方法有多种用法：</p>
              <p>可以传入一个 CSS 选择器作为参数，返回包含匹配元素的 JQ 对象。该方法是通过 <code>querySelectorAll</code> 实现的。</p>
              <pre><code class="language-js">$('.box')</code></pre>

              <p>可以传入 DOM 元素、任意数组、NodeList、JQ 对象，返回包含指定元素的 JQ 对象。</p>
              <pre><code class="language-js">$(document)</code></pre>

              <p>可以传入 HTML 字符串，返回包含根据 HTML 创建的 DOM 的 JQ 对象。</p>
              <pre><code class="language-js">$('&lt;div id=&quot;wrapper&quot;&gt;
  &lt;span id=&quot;inner&quot;&gt;&lt;/span&gt;
&lt;/div&gt;')</code></pre>

              <p>可以传入一个函数，在 DOM 加载完毕后会调用该函数。</p>
              <pre><code class="language-js">$(function () { console.log('DOM Loaded') })</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">插件编写 <a class="anchor" id="jq-plugin"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>$.extend()</code></td>
            <td>
              <p>如果只传入一个对象，该对象中的属性将合并到 JQ 对象中，相当于在 JQ 的命名空间下添加新的功能。</p>
              <pre><code class="language-js">$.extend({
  customFunc: function () {}
})

// 然后就可以这样调用自定义方法了
$.customFunc()
</code></pre>
              <p>如果传入了两个或更多个对象，所有对象的属性都添加到第一个对象，并返回合并后的对象。</p>
              <pre><code class="language-js">var object = $.extend(
  { key1: val1 },
  { key2: val2 },
  { key3: val3 }
);

// 此时第一个对象和返回值都是 { key1: val1, key2: val2, key3: val3 }</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.fn.extend()</code></td>
            <td>
              <p>在 JQ 的原型链上扩展方法。</p>
              <pre><code class="language-js">$.fn.extend({
  customFunc: function () {}
})

// 然后就可以这样使用扩展的方法了
$(document).customFunc()</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">URL <a class="anchor" id="jq-url"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>$.param()</code></td>
            <td>
              <p>将对象或数组序列化，返回一个可用于 URL 参数的字符串。</p>
              <pre><code class="language-js">$.param({ width: 1680, height: 1050 })
// width=1680&height=1050

$.param({ foo: { one: 1, two: 2 } })
// foo[one]=1&foo[two]=2

$.param({ ids: [1, 2, 3] })
// ids[]=1&ids[]=2&ids[]=3</code></pre>
              <p>若传入参数是一个数组，则该数组格式必须与 <code>.serializeArray()</code> 的返回格式一致：</p>
              <pre><code class="language-js">param([
  { "name": "name", "value": "mdui" },
  { "name": "password", "value": "123456" }
])
// name=mdui&password=123456</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">数组对象操作 <a class="anchor" id="jq-array"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>$.each()</code></td>
            <td>
              <p>遍历数组或对象。返回值为第一个参数，即被遍历的数组或对象。</p>
              <p>函数的第一个参数为数组的索引位置、或对象的键；第二个参数为数组或对象对应位置的值。</p>
              <p>回调函数中的 <code>this</code> 指向数组或对象对应位置的值。若回调函数返回 <code>false</code>，则停止遍历。</p>
              <pre><code class="language-js">// 遍历一个数组
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// 结果：
// 0:a
// 1:b
// 2:c</code></pre>
              <pre><code class="language-js">// 遍历一个对象
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// 结果
// name:mdui
// lang:zh</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.merge()</code></td>
            <td>
              <p>把第二个数组的元素追加到第一个数组中，并返回合并后的数组。</p>
              <pre><code class="language-js">var first = ['a', 'b', 'c'];
var second = ['c', 'd', 'e'];
var result = $.merge(first, second);

console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.unique()</code></td>
            <td>
              <p>过滤掉数组中的重复元素。</p>
              <pre><code class="language-js">var result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]);
console.log(result); // [1, 2, 12, 3]</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.map()</code></td>
            <td>
              <p>遍历数组或对象，返回由函数的返回值组成的新数组。</p>
              <p>函数的第一个参数为数组或对象对应位置的值，第二个参数为数组的索引位置、或对象的键。</p>
              <p>函数可以返回任何值，若函数返回的是数组，则会被展开；若返回的是 <code>null</code> 或 <code>undefined</code>，则会被忽略。函数内部的 <code>this</code> 指向 <code>window</code> 对象。</p>
              <pre><code class="language-js">// 遍历数组
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']</code></pre>
              <pre><code class="language-js">// 回调函数返回数组时，会被展开
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]</code></pre>
              <pre><code class="language-js">// 遍历对象
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.contains()</code></td>
            <td>
              <p>判断父节点是否包含子节点，返回布尔值。</p>
              <pre><code class="language-js">$.contains(document, document.body); // true
$.contains(document.body, document); // false</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">数据类型判断 <a class="anchor" id="jq-type"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.is()</code></td>
            <td>
              <p>如果集合中至少有一个元素和参数匹配，则返回 <code>true</code>，否则返回 <code>false</code>。</p>
              <p>参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象、或回调函数。</p>
              <p>参数为回调函数时，函数的第一个参数为索引位置，第二个参数为当前元素，<code>this</code> 指向当前元素。若函数返回 <code>true</code>，表示匹配；若返回 <code>false</code>，表示不匹配。</p>
              <pre><code class="language-js">$('.box').is('.box'); // true
$('.box').is('.boxss'); // false
$('.box').is($('.box')[0]); // true</code></pre>
              <pre><code class="language-js">// 通过回调函数的返回值做判断
$(document).is(function (index, element) {
  return element === document;
});
// true</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">对象访问 <a class="anchor" id="jq-obj"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.length</code></td>
            <td>
              <p>返回当前集合中元素的数量。</p>
              <pre><code class="language-js">$('body').length; // 1</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.each()</code></td>
            <td>
              <p>遍历当前集合，为集合中每一个元素执行一个函数。如果函数返回 <code>false</code>，则结束遍历。</p>
              <p>函数的第一个参数为元素的索引位置，第二个参数为当前元素。函数中的 <code>this</code> 指向当前元素。</p>
              <pre><code class="language-js">$('img').each(function(index, element) {
  this.src = 'test' + index + '.jpg';
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.map()</code></td>
            <td>
              <p>遍历当前集合，为集合中的每个元素执行一个函数，返回由函数返回值组成的新集合。若函数返回 <code>null</code> 或 <code>undefined</code> 则会被过滤。</p>
              <p>函数的第一个参数为元素的索引位置，第二个参数为当前元素。函数的 <code>this</code> 指向当前元素。</p>
              <pre><code class="language-js">var result = $('input.checked').map(function (index, element) {
  return $(this).val();
});

// result 为匹配元素的值组成的 JQ 对象</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.eq()</code></td>
            <td>
              <p>返回仅包含指定索引位置的元素的集合。</p>
              <pre><code class="language-js">$('div').eq(0); // 返回仅包含第一个元素的 JQ 对象
$('div').eq(-1); // 返回仅包含最后一个元素的 JQ 对象
$('div').eq(-2); // 返回仅包含倒数第二个元素的 JQ 对象</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.first()</code></td>
            <td>
              <p>返回仅包含第一个元素的集合。</p>
              <pre><code class="language-js">$('div').first(); // 返回仅包含第一个 div 的 JQ 对象</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.last()</code></td>
            <td>
              <p>返回仅包含最后一个元素的集合。</p>
              <pre><code class="language-js">$('div').last(); // 返回仅包含最后一个 div 的 JQ 对象</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.get()</code></td>
            <td>
              <p>返回指定索引位置的元素。若未传入参数，则返回集合中所有元素组成的数组。</p>
              <pre><code class="language-js">$('div').get(); // 返回所有 div 元素组成的数组
$('div').get(0); // 返回第一个 div 元素
$('div').get(-1); // 返回最后一个 div 元素</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.index()</code></td>
            <td>
              <p>如果没有传入参数，则返回集合中第一个元素相对于同辈元素的索引位置。</p>
              <p>如果传入了一个 CSS 选择器作为参数，则返回集合中第一个元素相对与 CSS 选择器匹配元素的索引位置。</p>
              <p>如果传入了一个 DOM 元素，则返回该 DOM 元素在集合中的索引值。</p>
              <p>如果传入一个 JQ 对象，则返回对象中第一个元素在当前集合中的索引位置。</p>
              <pre><code class="language-html">&lt;div id=&quot;child&quot;&gt;
  &lt;div id=&quot;child1&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;child2&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;child3&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;child4&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
              <pre><code class="language-js">$('#child3').index(); // 2
$('#child3').index('#child div'); // 2
$('#child div').index($('#child3').get(0); // 2</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.slice()</code></td>
            <td>
              <p>返回当前集合的子集。</p>
              <p>第一个参数为子集的起始位置，第二个参数为子集的结束位置；若未传入第二个参数，表示包含从起始位置到结尾的所有元素。</p>
              <pre><code class="language-js">// 返回集合中第三个（包含第三个）之后的所有元素
$('div').slice(3);

// 返回集合中第三个到第五个（包含第三个，不包含第五个）之间的元素
$('div').slice(3, 5);</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.filter()</code></td>
            <td>
              <p>从当前集合中筛选出与指定表达式匹配的元素。参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、回调函数。</p>
              <p>参数为函数时，函数的第一个参数为索引位置，第二个参数为当前元素，函数中的 <code>this</code> 指向当前元素。函数返回 <code>true</code> 时，当前元素会被保留，返回 <code>false</code> 时，当前元素会被移除。</p>
              <pre><code class="language-js">// 筛选出所有含 .box 的 div 元素
$('div').filter('.box');

// 筛选出所有已选中选项
$('#select option').filter(function (index, element) {
  return element.selected;
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.not()</code></td>
            <td>
              <p>从当前集合中筛选出与指定表达式不匹配的元素。参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、回调函数。</p>
              <p>参数为函数时，函数的第一个参数为索引位置，第二个参数为当前元素，函数中的 <code>this</code> 指向当前元素。函数返回 <code>true</code> 时，当前元素会被移除，返回 <code>false</code> 时，当前元素会被保留。</p>
              <pre><code class="language-js">// 筛选出所有不含 .box 类的 div 元素
$('div').not('.box');

// 筛选出所有未选中选项
$('#select option').not(function (index, element) {
  return element.selected;
});</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">CSS 类 <a class="anchor" id="jq-class"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.hasClass()</code></td>
            <td>
              <p>判断集合中的第一个元素是否含有指定 CSS 类。</p>
              <pre><code class="language-js">// 判断第一个 div 元素是否含有 .item
$('div').hasClass('item')</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.addClass()</code></td>
            <td>
              <p>为集合中的每个元素添加 CSS 类，多个类名之间可以用空格分隔。</p>
              <p>也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 <code>this</code> 指向当前元素。</p>
              <pre><code class="language-js">// 为所有 div 元素添加 .item
$('div').addClass('item')</code></pre>
              <pre><code class="language-js">// 为所有 div 元素添加 .item1 和 .item2
$('div').addClass('item1 item2')</code></pre>
              <pre><code class="language-js">// 为所有 div 元素添加由回调函数返回的 CSS 类
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.removeClass()</code></td>
            <td>
              <p>移除集合中的元素上的 CSS 类，多个类名之间可以用空格分隔。</p>
              <p>也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若没有传入参数，则将直接移除元素上的 <code>class</code> 属性。</p>
              <pre><code class="language-js">// 移除所有 div 元素上的 .item
$('div').removeClass('item')</code></pre>
              <pre><code class="language-js">// 移除所有 div 元素上的 .item1 和 .item2
$('div').removeClass('item1 item2')</code></pre>
              <pre><code class="language-js">// 移除所有 div 元素上的由回调函数返回的 CSS 类
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})</code></pre>
              <pre><code class="language-js">// 直接移除 class 属性
$('div').removeClass()</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.toggleClass()</code></td>
            <td>
              <p>元素上的 CSS 类，有则删除，无则添加。多个类名之间可以用空格分隔。</p>
              <p>也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 <code>this</code> 指向当前元素。</p>
              <pre><code class="language-js">// 切换所有 div 元素上的 .item
$('div').toggleClass('item')</code></pre>
              <pre><code class="language-js">// 切换所有 div 元素上的 .item1 和 .item2
$('div').toggleClass('item1 item2')</code></pre>
              <pre><code class="language-js">// 切换所有 div 元素上的由回调函数返回的 CSS 类
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">节点属性 <a class="anchor" id="jq-attr"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.prop()</code></td>
            <td>
              <p>获取集合中第一个元素的属性值。</p>
              <pre><code class="language-js">// 获取第一个元素的属性值
$('input').prop('checked');</code></pre>
              <p>也可以是设置集合中所有元素的属性值。</p>
              <p>设置的属性值可以是回调函数的返回值。回调函数的第一个参数为元素的索引位置，第二个参数为该元素上原有的属性值，函数内的 <code>this</code> 指向当前元素。</p>
              <p>若属性值或回调函数的返回值为 <code>void</code> 或 <code>undefined</code>，则不会修改原有属性。</p>
              <p>也可以通过传入对象来同时设置多个属性。</p>
              <pre><code class="language-js">// 设置所有选中元素的属性值
$('input').prop('checked', true);

// 通过回调函数的返回值设置属性值
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// 同时设置元素的多个属性值
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.removeProp()</code></td>
            <td>
              <p>删除集合中所有元素上指定的属性值。</p>
              <pre><code class="language-js">$('input').removeProp('disabled');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.attr()</code></td>
            <td>
              <p>获取集合中第一个元素的属性值。</p>
              <pre><code class="language-js">// 获取第一个元素的属性值
$('div').attr('username');</code></pre>
              <p>也可以是设置集合中所有元素的属性值。</p>
              <p>设置的属性值可以是回调函数的返回值。回调函数的第一个参数为元素的索引位置，第二个参数为该元素上原有的属性值，函数内的 <code>this</code> 指向当前元素。</p>
              <p>若属性值或回调函数的返回值为 <code>void</code> 或 <code>undefined</code>，则不会修改原有属性。若属性值或回调函数的返回值为 <code>null</code>，则删除指定属性。</p>
              <p>也可以通过传入对象来同时设置多个属性。</p>
              <pre><code class="language-js">// 设置所有选中元素的属性值
$('div').attr('username', 'mdui');

// 通过回调函数的返回值设置属性值
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// 同时设置元素的多个属性值
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.removeAttr()</code></td>
            <td>
              <p>删除集合中所有元素上指定的属性值，多个属性名之间可以用空格分隔。</p>
              <pre><code class="language-js">// 删除集合中所有元素上的一个属性
$('div').removeAttr('username');

// 删除集合中所有元素上的多个属性
$('div').removeAttr('username lastname');
</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.val()</code></td>
            <td>
              <p>获取集合中第一个元素的值。</p>
              <p>若元素是 <code>&lt;select multiple=&quot;multiple&quot;&gt;</code>，则将返回一个包含每个选择项的数组。</p>
              <pre><code class="language-js">// 获取选中的第一个元素的值
$('#input').val();</code></pre>
              <p>也可以是设置集合中所有元素的值。</p>
              <p>设置的值可以是字符串、数值、字符串数组、回调函数。</p>
              <p>若值为回调函数，第一个参数为元素的索引位置，第二个参数为元素的原有的值，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若元素为 <code>&lt;input type=&quot;checkbox&quot;&gt;</code>、<code>&lt;input type=&quot;radio&quot;&gt;</code>、<code>&lt;option&gt;</code>，则元素值、或函数返回值可以为数组，此时将选中值在数组中的元素，并取消值不在数组中的元素。</p>
              <p>若值、或函数返回值为 <code>undefined</code>，则会将元素值设为空。</p>
              <pre><code class="language-js">// 设置选中元素的值
$('#input').val('input value');

// 通过回调函数的返回值设置元素值
$('#input').val(function (index, oldValue) {
  return 'new value';
});
</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.text()</code></td>
            <td>
              <p>获取集合中所有元素的文本内容（包含它们的后代元素）</p>
              <pre><code class="language-js">// 获取所有 .box 元素的文本
$('.box').text();</code></pre>
              <p>也可以是设置集合中所有元素的文本。</p>
              <p>设置的值可以是字符串、数值、布尔值、回调函数。</p>
              <p>若为回调函数，第一个参数为元素的索引位置，第二个参数为元素原有的文本内容，函数内的 <code>this</code> 指向当前元素。</p>
              <p>若设置的值、或回调函数返回值为 <code>undefined</code>，则不修改对应元素的文本。</p>
              <pre><code class="language-js">// 设置选中元素的文本内容
$('.box').text('text content');

// 通过回调函数的返回值设置元素的文本内容
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.html()</code></td>
            <td>
              <p>获取集合中第一个元素的 HTML 内容。</p>
              <pre><code class="language-js">// 获取第一个 .box 元素的 HTML 内容
$('.box').html();</code></pre>
              <p>也可以是设置集合中所有元素的 HTML 内容。</p>
              <p>设置的值可以是 HTML 字符串、DOM 元素、回调函数。</p>
              <p>若为回调函数，第一个参数为元素的索引位置，第二个参数为元素原有的 HTML 内容，函数内的 <code>this</code> 指向当前元素。</p>
              <p>如设置的值、或函数返回值为 <code>undefined</code>，则不修改对应元素的 HTML。</p>
              <pre><code class="language-js">// 设置选中元素的 HTML
$('.box').html('&lt;div&gt;new html content&lt;/div&gt;');

// 通过回调函数的返回值设置元素的 HTML 内容
$('.box').html(function (index, oldHTMLContent) {
  return '&lt;div&gt;new html content&lt;/div&gt;';
});</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">数据存储 <a class="anchor" id="jq-data"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>$.data()</code></td>
            <td>
              <p>在指定元素上读取或存储数据。</p>
              <p>存储数据时，若值为 <code>undefined</code>，则相当于读取元素上对应的数据。即 <code>$.data(element, 'key', undefined)</code> 和 <code>$.data(element, 'key')</code> 等效。</p>
              <p>注意：该方法不会检索元素上的 <code>data-*</code> 属性。</p>
              <pre><code class="language-js">// 在指定元素上存储数据，返回存储的值
$.data(document.body, 'layout', 'dark'); // 返回 dark

// 在指定元素上同时存储多个数据
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// 获取在指定元素上存储的数据
$.data(document.body, 'layout'); // 返回 dark

// 获取在指定元素上存储的所有数据
$.data(document.body); // 返回 { layout: 'dark', primary: 'indigo', accent: 'pink' }</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.removeData()</code></td>
            <td>
              <p>移除指定元素上存储的数据。</p>
              <p>多个键名可以用空格分隔，也可以用数组表示多个键名。未指定键名时，将移除元素上的所有数据。</p>
              <pre><code class="language-js">// 移除元素上键名为 name 的数据
$.removeData(document.body, 'name');

// 移除元素上键名为 name1 和 name2 的数据。下面两种方法等效：
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// 移除元素上存储的所有数据
$.removeData(document.body);</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.data()</code></td>
            <td>
              <p>在当前集合的元素上读取或存储数据。</p>
              <p>存储数据时，若值为 <code>undefined</code>，则不进行存储。</p>
              <p>注意：该方法检索的数据会包含元素上的 <code>data-*</code> 属性。</p>
              <pre><code class="language-js">// 在当前集合中的元素上存储数据
$('.box').data('layout', 'dark');

// 在当前集合中的元素上同时存储多个数据
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// 获取当前集合中第一个元素上存储的指定数据
$('.box').data('layout'); // 返回 dark

// 获取在当前集合中第一个元素上存储的所有数据
$('.box').data(); // 返回 { layout: 'dark', primary: 'indigo', accent: 'pink' }</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.removeData()</code></td>
            <td>
              <p>移除当前集合的元素上存储的数据。</p>
              <p>多个键名可以用空格分隔，也可以用数组表示多个键名。未指定键名时，将移除元素上的所有数据。</p>
              <p>注意：该方法只会移除通过 <code>.data()</code> 方法设置的数据，不会移除 <code>data-*</code> 属性上的数据。</p>
              <pre><code class="language-js">// 移除键名为 name 的数据
$('.box').removeData('name');

// 移除键名为 name1 和 name2 的数据。下面两种方法等效：
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// 移除元素上存储的所有数据
$('.box').removeData();</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">样式 <a class="anchor" id="jq-style"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.css()</code></td>
            <td>
              <p>获取集合中第一个元素的 CSS 属性值。</p>
              <pre><code class="language-js">$('.box').css('color')</code></pre>
              <p>也可以设置集合中所有元素的 CSS 属性值。</p>
              <p>属性值可以是字符串、数值、或一个返回字符串或数值的回调函数。</p>
              <p>若属性值是回调函数，第一个参数为元素的索引位置，第二个参数为元素原有的 CSS 属性值，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若属性值或回调函数返回 <code>void</code>、<code>undefined</code>、<code>null</code>，则不对当前元素的 CSS 属性值进行修改。</p>
              <p>若属性值或回调函数返回数值，则会添加 <code>px</code> 作为单位。若该属性无法使用 <code>px</code> 作为单位，则会直接把该值转为字符串。</p>
              <p>也可以通过传入一个键值对对象，来同时设置多个 CSS 属性。</p>
              <pre><code class="language-js">// 设置集合中所有元素的样式值
$('.box').css('color', 'red')

// 通过回调函数的返回值设置所有元素的样式值
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// 通过传入一个对象同时设置多个样式
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.width()</code></td>
            <td>
              <p>获取集合中第一个元素的宽度（像素值），不包含 <code>padding</code>、<code>border</code>、<code>margin</code> 的宽度。</p>
              <pre><code class="language-js">$('.box').width();</code></pre>
              <p>也可以设置集合中所有元素的宽度（不包含 <code>padding</code>、<code>border</code>、<code>margin</code> 的宽度）。</p>
              <p>值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。</p>
              <p>回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的宽度值，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若值、或回调函数的返回值为数值，则会自动添加 <code>px</code> 作为单位。</p>
              <p>若值、或回调函数的返回值为 <code>null</code> 或 <code>undefined</code>，则不修改元素的宽度。</p>
              <pre><code class="language-js">// 设置集合中所有元素的宽度
$('.box').width('20%');

// 值为数值时，默认单位为 px
$('.box').width(10);

// 通过回调函数的返回值设置宽度
$('.box').width(function (index, oldWidth) {
  return 10;
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.height()</code></td>
            <td>
              <p>获取集合中第一个元素的高度（像素值），不包含 <code>padding</code>、<code>border</code>、<code>margin</code> 的高度。</p>
              <pre><code class="language-js">$('.box').height();</code></pre>
              <p>也可以设置集合中所有元素的高度（不包含 <code>padding</code>、<code>border</code>、<code>margin</code> 的高度）。</p>
              <p>值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。</p>
              <p>回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的高度值，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若值、或回调函数的返回值为数值，则会自动添加 <code>px</code> 作为单位。</p>
              <p>若值、或回调函数的返回值为 <code>null</code> 或 <code>undefined</code>，在不修改元素的高度。</p>
              <pre><code class="language-js">// 设置集合中所有元素的高度
$('.box').height('20%');

// 值为数值时，默认单位为 px
$('.box').height(10);

// 通过回调函数的返回值设置高度
$('.box').height(function (index, oldWidth) {
  return 10;
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.innerWidth()</code></td>
            <td>
              <p>获取集合中第一个元素的宽度（像素值），包含 <code>padding</code>，不包含 <code>border</code>、<code>margin</code> 的宽度。</p>
              <pre><code class="language-js">$('.box').innerWidth();</code></pre>
              <p>也可以设置集合中所有元素的宽度（包含 <code>padding</code>，不包含 <code>border</code>、<code>margin</code> 的宽度）。</p>
              <p>值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。</p>
              <p>回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的宽度值，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若值、或回调函数的返回值为数值，则会自动添加 <code>px</code> 作为单位。</p>
              <p>若值、或回调函数的返回值为 <code>null</code> 或 <code>undefined</code>，则不修改元素的宽度。</p>
              <pre><code class="language-js">// 设置集合中所有元素的宽度
$('.box').innerWidth('20%');

// 值为数值时，默认单位为 px
$('.box').innerWidth(10);

// 通过回调函数的返回值设置宽度
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.innerHeight()</code></td>
            <td>
              <p>获取集合中第一个元素的高度（像素值），包含 <code>padding</code>，不包含 <code>border</code>、<code>margin</code> 的高度。</p>
              <pre><code class="language-js">$('.box').innerHeight();</code></pre>
              <p>也可以设置集合中所有元素的高度（包含 <code>padding</code>，不包含 <code>border</code>、<code>margin</code> 的高度）。</p>
              <p>值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。</p>
              <p>回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的高度值，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若值、或回调函数的返回值为数值，则会自动添加 <code>px</code> 作为单位。</p>
              <p>若值、或回调函数的返回值为 <code>null</code> 或 <code>undefined</code>，在不修改元素的高度。</p>
              <pre><code class="language-js">// 设置集合中所有元素的高度
$('.box').innerHeight('20%');

// 值为数值时，默认单位为 px
$('.box').innerHeight(10);

// 通过回调函数的返回值设置高度
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.outerWidth()</code></td>
            <td>
              <p>获取集合中第一个元素的宽度（像素值），包含 <code>padding</code>、<code>border</code>的宽度，不包含 <code>margin</code> 的宽度，可以传入参数 <code>true</code>，使宽度包含 <code>margin</code> 的宽度。</p>
              <pre><code class="language-js">// 包含 padding、border 的宽度
$('.box').outerWidth();

// 包含 padding、border、margin 的宽度
$('.box').outerWidth(true);</code></pre>
              <p>也可以设置集合中所有元素的宽度（包含 <code>padding</code>、<code>border</code>，不包含 <code>margin</code> 的宽度，可以在第二个参数中传入 <code>true</code>，使宽度包含 <code>margin</code> 的宽度）。</p>
              <p>第一个参数可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。</p>
              <p>回调函数的第一个参数为元素的索引位置，第二个参数为元素的原有宽度，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若值、或回调函数的返回值为数值，则会自动添加 <code>px</code> 作为单位。</p>
              <p>若值、或回调函数的返回值为 <code>null</code> 或 <code>undefined</code>，则不修改元素的宽度。</p>
              <pre><code class="language-js">// 设置集合中所有元素的宽度
$('.box').outerWidth('20%');

// 值为数值时，默认单位为 px
$('.box').outerWidth(10);

// 第二个参数为 true，则宽度将包含 margin
$('.box').outerWidth(10, true);

// 通过回调函数的返回值设置宽度
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.outerHeight()</code></td>
            <td>
              <p>获取集合中第一个元素的高度（像素值），包含 <code>padding</code>、<code>border</code>的高度，不包含 <code>margin</code> 的高度，可以传入参数 <code>true</code>，使高度包含 <code>margin</code> 的高度。</p>
              <pre><code class="language-js">// 包含 padding、border 的高度
$('.box').outerHeight();

// 包含 padding、border、margin 的高度
$('.box').outerHeight(true);</code></pre>
              <p>也可以设置集合中所有元素的高度（包含 <code>padding</code>、<code>border</code>，不包含 <code>margin</code> 的高度，可以在第二个参数中传入 <code>true</code>，使高度包含 <code>margin</code> 的高度）。</p>
              <p>第一个参数可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。</p>
              <p>回调函数的第一个参数为元素的索引位置，第二个参数为元素的原有高度，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若值、或回调函数的返回值为数值，则会自动添加 <code>px</code> 作为单位。</p>
              <p>若值、或回调函数的返回值为 <code>null</code> 或 <code>undefined</code>，则不修改元素的高度。</p>
              <pre><code class="language-js">// 设置集合中所有元素的高度
$('.box').outerHeight('20%');

// 值为数值时，默认单位为 px
$('.box').outerHeight(10);

// 第二个参数为 true，则高度将包含 margin
$('.box').outerHeight(10, true);

// 通过回调函数的返回值设置高度
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.hide()</code></td>
            <td>
              <p>隐藏集合中的所有元素。</p>
              <pre><code class="language-js">$('.box').hide();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.show()</code></td>
            <td>
              <p>显示集合中的所有元素。</p>
              <pre><code class="language-js">$('.box').show();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.toggle()</code></td>
            <td>
              <p>切换集合中所有元素的显示状态。</p>
              <pre><code class="language-js">$('.box').toggle();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.offset()</code></td>
            <td>
              <p>获取集合中第一个元素相对于 <code>document</code> 的坐标。</p>
              <pre><code class="language-js">$('.box').offset(); // { top: 20, left: 30 }</code></pre>
              <p>也可以设置集合中所有元素相对于 <code>document</code> 的坐标。</p>
              <p>参数为一个包含 <code>top</code> 和 <code>left</code> 属性的对象，或一个返回此格式对象的回调函数。</p>
              <p>若参数是回调函数，第一个参数为元素的索引位置，第二个参数为元素的原有坐标，函数中的 <code>this</code> 指向当前元素。</p>
              <p>若参数中 <code>top</code> 或 <code>left</code> 的值为 <code>undefined</code>，则不修改对应的值。</p>
              <pre><code class="language-js">// 设置集合中所有元素的坐标
$('.box').offset({ top: 20, left: 30 });

// 通过回调函数的返回值设置元素的坐标
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.offsetParent()</code></td>
            <td>
              <p>返回集合中第一个元素的用于定位的父元素。即父元素中第一个 <code>position</code> 为 <code>relative</code> 或 <code>absolute</code> 的元素。</p>
              <pre><code class="language-js">$('.box').offsetParent();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.position()</code></td>
            <td>
              <p>获取集合中第一个元素相对于父元素的偏移。</p>
              <pre><code class="language-js">$('.box').position(); // { top: 20, left: 30 }</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">查找节点 <a class="anchor" id="jq-selector"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.find()</code></td>
            <td>
              <p>在当前集合的所有元素中，根据 CSS 选择器找到指定的后代节点的集合。</p>
              <pre><code class="language-js">// 找到 #box 的后代节点中，包含 .box 的节点集合
$('#box').find('.box')</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.children()</code></td>
            <td>
              <p>在当前集合的所有元素中，获取直接子元素组成的集合。</p>
              <p>可以传入一个 CSS 选择器作为参数，对子元素进行过滤。</p>
              <pre><code class="language-js">// 找到 #box 的所有直接子元素
$('#box').children();

// 找到 #box 的所有直接子元素中，包含 .box 的元素集合
$('#box').children('.box')</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.has()</code></td>
            <td>
              <p>在当前集合的所有元素中，筛选出含有指定子元素的元素。</p>
              <p>参数可以是 CSS 选择器或 DOM 元素。</p>
              <pre><code class="language-js">// 给含有 ul 的 li 加上背景色
$('li').has('ul').css('background-color', 'red');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.parent()</code></td>
            <td>
              <p>获取当前集合中，所有元素的直接父元素的集合。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的父元素的集合。</p>
              <pre><code class="language-js">// 返回 .box 元素的直接父元素
$('.box').parent();

// 返回 .box 元素的直接父元素中含有 .parent 类的元素
$('.box').parent('.parent');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.parents()</code></td>
            <td>
              <p>获取当前集合中，所有元素的祖先元素的集合。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的祖先元素的集合。</p>
              <pre><code class="language-js">// 返回 span 元素的所有祖先元素
$('span').parents();

// 返回 span 元素的所有是 p 元素的祖先元素
$('span').parents('p');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.parentsUntil()</code></td>
            <td>
              <p>获取当前集合中，每个元素的所有父辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。</p>
              <p>第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。</p>
              <p>可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。</p>
              <p>若没有指定参数，则所有的祖先元素都将被匹配，即和 <code>.parents()</code> 效果一样。</p>
              <pre><code class="language-js">// 获取 .item 元素的所有祖先元素
$('.item').parentsUntil();

// 查找 .item 元素的所有父辈元素，直到遇到 .parent 元素为止
$('.item').parentsUntil('.parent');

// 获取 .item 元素的所有是 div 元素的祖先元素，直到遇到 .parent 元素为止
$('.item').parentsUntil('.parent', 'div');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.prev()</code></td>
            <td>
              <p>获取当前集合中所有元素的前一个同辈元素组成的集合。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。</p>
              <pre><code class="language-js">// 获取 .box 元素的前一个元素的集合
$('.box').prev();

// 获取 .box 元素的前一个 div 元素的集合
$('.box').prev('div');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.prevAll()</code></td>
            <td>
              <p>获取当前集合中所有元素的前面的所有同辈元素组成的集合。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。</p>
              <pre><code class="language-js">// 获取 .box 元素前面的所有同辈元素
$('.box').prevAll();

// 获取 .box 元素前面的所有含 .selected 的同辈元素
$('.box').prevAll('.selected');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.prevUntil()</code></td>
            <td>
              <p>获取当前集合中，每个元素前面所有的同辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。</p>
              <p>第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。</p>
              <p>可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。</p>
              <pre><code class="language-js">// 获取 .box 元素前面所有的同辈元素
$('.box').prevUntil();

// 获取 .box 元素前所有的同辈元素，直到遇到 .until 元素为止
$('.box').prevUntil('.until');

// 获取 .box 元素前面同辈的 div 元素，直到遇到 .until 元素为止
$('.box').prevUntil('.until', 'div');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.next()</code></td>
            <td>
              <p>获取当前集合中所有元素的后一个同辈元素组成的集合。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。</p>
              <pre><code class="language-js">// 获取 .box 元素的后一个元素的集合
$('.box').next();

// 获取 .box 元素的后一个 div 元素的集合
$('.box').next('div');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.nextAll()</code></td>
            <td>
              <p>获取当前集合中所有元素的后面的所有同辈元素组成的集合。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。</p>
              <pre><code class="language-js">// 获取 .box 元素后面的所有同辈元素
$('.box').nextAll();

// 获取 .box 元素后面的所有含 .selected 的同辈元素
$('.box').nextAll('.selected');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.nextUntil()</code></td>
            <td>
              <p>获取当前集合中，每个元素后面所有的同辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。</p>
              <p>第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。</p>
              <p>可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。</p>
              <pre><code class="language-js">// 获取 .box 元素后面所有的同辈元素
$('.box').nextUntil();

// 获取 .box 元素后所有的同辈元素，直到遇到 .until 元素为止
$('.box').nextUntil('.until');

// 获取 .box 元素后面同辈的 div 元素，直到遇到 .until 元素为止
$('.box').nextUntil('.until', 'div');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.closest()</code></td>
            <td>
              <p>从当前元素向上逐级匹配，返回最先匹配到的元素。</p>
              <p>参数可以是 CSS 选择器、DOM 元素、JQ 对象。</p>
              <pre><code class="language-js">// 获取 .box 元素的父元素中最近的 .parent 元素
$('.box').closest('.parent');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.siblings()</code></td>
            <td>
              <p>获取当前集合中，每个元素的兄弟元素。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的兄弟元素。</p>
              <pre><code class="language-js">// 获取 .box 元素的所有兄弟元素
$('.box').siblings();

// 获取 .box 元素的所有兄弟元素中含 .selected 的元素
$('.box').siblings('.selected');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.add()</code></td>
            <td>
              <p>添加元素到当前集合中。</p>
              <p>参数可以是 HTML 字符串、CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。</p>
              <pre><code class="language-js">// 把含 .selected 的元素添加到当前集合中中
$('.box').add('.selected');</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">节点操作 <a class="anchor" id="jq-dom"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.empty()</code></td>
            <td>
              <p>移除当前元素中所有的子元素。</p>
              <pre><code class="language-js">$('.box').empty();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.remove()</code></td>
            <td>
              <p>从 DOM 中移除当前集合中的元素。</p>
              <p>可以传入一个 CSS 选择器作为参数，仅移除与该参数匹配的元素。</p>
              <pre><code class="language-js">// 移除所有 p 元素
$('p').remove();

// 移除所有含 .box 的 p 元素
$('p').remove('.box');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.prepend()</code></td>
            <td>
              <p>在当前集合的元素内部的前面插入指定内容。</p>
              <p>参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。</p>
              <p>也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 <code>this</code> 指向当前元素。</p>
              <p>该方法返回原始集合。</p>
              <pre><code class="language-js">// 插入一个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').prepend('&lt;b&gt;Hello&lt;/b&gt;');
// 结果：&lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;I would like to say: &lt;/p&gt;


// 插入多个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').prepend('&lt;b&gt;Hello&lt;/b&gt;', '&lt;b&gt;World&lt;/b&gt;');
// 结果：&lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;&lt;b&gt;World&lt;/b&gt;I would like to say: &lt;/p&gt;


// 通过回调函数插入一个元素
$('&lt;p&gt;Hello&lt;/p&gt;').append(function (index, oldHTML) {
  return '&lt;b&gt;' + oldHTML + index + '&lt;/b&gt;';
});
// 结果：&lt;p&gt;&lt;b&gt;Hello0&lt;/b&gt;Hello&lt;/p&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.prependTo()</code></td>
            <td>
              <p>把当前集合中的元素追加到指定元素内部的前面。</p>
              <p>参数可以是 CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。</p>
              <p>该方法返回原始集合。</p>
              <pre><code class="language-js">$('&lt;p&gt;Hello&lt;/p&gt;').prependTo('&lt;p&gt;I would like to say: &lt;/p&gt;');

// 结果：[ &lt;p&gt;&lt;p&gt;Hello&lt;/p&gt;I would like to say: &lt;/p&gt; ]</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.append()</code></td>
            <td>
              <p>在当前集合的元素内部的后面插入指定内容。</p>
              <p>参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。</p>
              <p>也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 <code>this</code> 指向当前元素。</p>
              <p>该方法返回原始集合。</p>
              <pre><code class="language-js">// 插入一个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').append('&lt;b&gt;Hello&lt;/b&gt;');
// 结果：&lt;p&gt;I would like to say: &lt;b&gt;Hello&lt;/b&gt;&lt;/p&gt;

// 插入多个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').append('&lt;b&gt;Hello&lt;/b&gt;', '&lt;b&gt;World&lt;/b&gt;');
// 结果：&lt;p&gt;I would like to say: &lt;b&gt;Hello&lt;/b&gt;&lt;b&gt;World&lt;/b&gt;&lt;/p&gt;

// 通过回调函数插入一个元素
$('&lt;p&gt;Hello&lt;/p&gt;').append(function (index, oldHTML) {
  return '&lt;b&gt;' + oldHTML + index + '&lt;/b&gt;';
});
// 结果：&lt;p&gt;Hello&lt;b&gt;Hello0&lt;/b&gt;&lt;/p&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.appendTo()</code></td>
            <td>
              <p>把当前集合中的元素追加到指定元素内部的后面。</p>
              <p>参数可以是 CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。</p>
              <p>该方法返回原始集合。</p>
              <pre><code class="language-js">$('&lt;p&gt;Hello&lt;/p&gt;').appendTo('&lt;p&gt;I would like to say: &lt;/p&gt;')
// 结果：&lt;p&gt;I would like to say: &lt;p&gt;Hello&lt;/p&gt;&lt;/p&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.after()</code></td>
            <td>
              <p>在当前集合的元素后面插入指定内容，作为其兄弟节点。</p>
              <p>参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。</p>
              <p>也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数为当前元素的索引位置，第二个参数为元素的原始 HTML，函数中的 <code>this</code> 指向当前元素。</p>
              <p>该方法返回原始集合。</p>
              <pre><code class="language-js">// 插入一个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').after('&lt;b&gt;Hello&lt;/b&gt;')
// 结果：&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;


// 插入多个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').after('&lt;b&gt;Hello&lt;/b&gt;', '&lt;b&gt;World&lt;/b&gt;')
// 结果：&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;&lt;b&gt;World&lt;/b&gt;


// 通过回调函数插入一个元素
$('&lt;p&gt;Hello&lt;/p&gt;').after(function (index, oldHTML) {
  return '&lt;b&gt;' + oldHTML + index + '&lt;/b&gt;';
});
// 结果：&lt;p&gt;Hello&lt;/p&gt;&lt;b&gt;Hello0&lt;/b&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.insertAfter()</code></td>
            <td>
              <p>把当前集合中的元素插入到目标元素的后面，作为其兄弟元素。</p>
              <p>如果当前集合中的元素是页面中已有的元素，则将移动该元素，而不是复制。如果有多个目标，则将克隆当前集合中的元素，并添加到每个目标元素的后面。</p>
              <p>可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数，来指定目标元素。</p>
              <pre><code class="language-js">$('&lt;b&gt;Hello&lt;/b&gt;').insertAfter('&lt;p&gt;I would like to say: &lt;/p&gt;');
// 结果：&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.before()</code></td>
            <td>
              <p>在当前集合的元素前面插入指定内容，作为其兄弟节点。</p>
              <p>参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。</p>
              <p>也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数为当前元素的索引位置，第二个参数为元素的原始 HTML，函数中的 <code>this</code> 指向当前元素。</p>
              <p>该方法返回原始集合。</p>
              <pre><code class="language-js">// 插入一个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').before('&lt;b&gt;Hello&lt;/b&gt;')
// 结果：&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;I would like to say: &lt;/p&gt;


// 插入多个元素
$('&lt;p&gt;I would like to say: &lt;/p&gt;').before('&lt;b&gt;Hello&lt;/b&gt;', '&lt;b&gt;World&lt;/b&gt;')
// 结果：&lt;b&gt;Hello&lt;/b&gt;&lt;b&gt;World&lt;/b&gt;&lt;p&gt;I would like to say: &lt;/p&gt;


// 通过回调函数插入一个元素
$('&lt;p&gt;Hello&lt;/p&gt;').before(function (index, oldHTML) {
  return '&lt;b&gt;' + oldHTML + index + '&lt;/b&gt;';
});
// 结果：&lt;b&gt;Hello0&lt;/b&gt;&lt;p&gt;Hello&lt;/p&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.insertBefore()</code></td>
            <td>
              <p>把当前集合中的元素插入到目标元素的前面，作为其兄弟元素。</p>
              <p>如果当前集合中的元素是页面中已有的元素，则将移动该元素，而不是复制。如果有多个目标，则将克隆当前集合中的元素，并添加到每个目标元素的后面。</p>
              <p>可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数，来指定目标元素。</p>
              <pre><code class="language-js">$('&lt;p&gt;I would like to say: &lt;/p&gt;').insertBefore('&lt;b&gt;Hello&lt;/b&gt;');
// 结果：&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.replaceWith()</code></td>
            <td>
              <p>用指定元素来替换当前集合中的元素。</p>
              <p>参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。</p>
              <p>也可以传入一个返回 HTML 字符串、DOM 元素、DOM元素数组、JQ 对象的回调函数，函数的第一个参数为当前元素的索引位置，第二个参数为元素的原始 HTML，函数中的 <code>this</code> 指向当前元素。</p>
              <p>该方法返回原始集合，即被替换掉的集合。</p>
              <pre><code class="language-js">// 用 &lt;p&gt;Hello&lt;/p&gt; 替换所有的 .box 元素
$('.box').replaceWith('&lt;p&gt;Hello&lt;/p&gt;');

// 用回调函数的返回值替换所有 .box 元素
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});
</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.replaceAll()</code></td>
            <td>
              <p>用当前集合中的元素替换指定元素。</p>
              <p>参数为 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象。</p>
              <p>该方法返回原始集合，即用于替换的元素的集合。</p>
              <pre><code class="language-js">// 用 .new 元素替换所有 .box 元素
$('.new').replaceAll('.box');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.clone()</code></td>
            <td>
              <p>通过深度克隆来复制集合中的所有元素。</p>
              <p>通过原生 <code>cloneNode</code> 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理程序复制到新的元素。这点和 jQuery 中利用一个参数来确定是否复制数据和事件处理不相同。</p>
              <pre><code class="language-js">$('body').append($("#box").clone())</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">表单 <a class="anchor" id="jq-form"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.serializeArray()</code></td>
            <td>
              <p>把表单元素的值组合成由 <code>name</code> 和 <code>value</code> 的键值对组成的数组。</p>
              <p>该方法可对单独表单元素进行操作，也可以对整个 <code>&lt;form&gt;</code> 表单进行操作</p>
              <pre><code class="language-js">$('form').serializeArray();
// [
//   { "name": "golang", "value":"456" },
//   { "name": "name", "value": "mdui" },
//   { "name": "password", "value": "" }
// ]</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.serialize()</code></td>
            <td>
              <p>将表单元素的值序列化。</p>
              <pre><code class="language-js">$('form').serialize();
// golang=456&name=mdui&password=</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">事件 <a class="anchor" id="jq-event"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.on()</code></td>
            <td>
              <p>为集合中每个元素的特定事件绑定事件处理函数。具体用法见下方示例：</p>
              <pre><code class="language-js">// 绑定点击事件
$('.box').on('click', function (e) {
  console.log('点击了 .box 元素');
});

// 绑定多个事件
$('.box').on('click focus', function (e) {
  console.log('click 和 focus 事件都会触发该函数');
});

// 事件委托
$(document).on('click', '.box', function (e) {
  console.log('点击 .box 时会触发该函数');
});

// 同时绑定多个事件和事件处理函数
$('.box').on({
  'click': function (e) {
    console.log('触发了 click 事件');
  },
  'focus': function (e) {
    console.log('触发了 focus 事件');
  }
});

// 传入参数
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('点击了 .box 元素，并为事件处理函数传入了参数');
  // e._data 为 {key1: 'value1', key2: 'value2'}
});

// 同时绑定多个事件和事件处理函数，并传入参数
$('.box').on({
  'click': function (e) {
    console.log('触发了 click 事件');
    // e._data 为 {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('触发了 focus 事件');
    // e._data 为 {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// 通过事件委托绑定事件，并传入参数
$(document).on('click', '.box', { key1: 'value1', keys: 'value2' }, function (e) {
  console.log('点击了 .box 元素，并为事件处理函数传入了参数');
  // e._data 为 {key1: 'value1', key2: 'value2'}
});

// 通过事件委托同时绑定多个事件和事件处理函数
$(document).on({
  'click': function (e) {
    console.log('触发了 click 事件');
  },
  'focus': function (e) {
    console.log('触发了 focus 事件');
  }
}, '.box');

// 通过事件委托同时绑定多个事件和事件处理函数，并传入参数
$(document).on({
  'click': function (e) {
    console.log('触发了 click 事件');
    // e._data 为 {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('触发了 focus 事件');
    // e._data 为 {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// 获取事件参数
$('.box').on('click', function (e, data) {
  // data 等于 e._detail
});

// 事件名支持使用命名空间
$('.box').on('click.myPlugin', function () {
  console.log('点击了 .box 元素');
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.one()</code></td>
            <td>
              <p>为每个匹配元素的特定事件绑定事件处理函数。但事件只会触发一次。</p>
              <p>该方法的用法和 <code>.on()</code> 相同，所以不再举例了。</p>
            </td>
          </tr>
          <tr>
            <td><code>.off()</code></td>
            <td>
              <p>为集合中每个元素解除绑定的事件。具体用法见下方示例：</p>
              <pre><code class="language-js">// 解除所有绑定的事件处理函数
$('.box').off();

// 解除绑定的指定事件
$('.box').off('click');

// 同时解除多个绑定的事件
$('.box').off('click focus');

// 解除绑定的指定事件处理函数
$('.box').off('click', callback);

// 解除通过事件委托绑定的事件
$(document).off('click', '.box');

// 解除通过事件委托绑定的指定事件处理函数
$(document).off('click', '.box', callback);

// 同时解绑多个事件处理函数
$('.box.').off({
  'click': callback1,
  'focus': callback2,
});

// 同时解绑多个通过事件委托绑定的事件处理函数
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// 事件名支持使用命名空间，下面的用法将解绑所有以 <code>.myPlugin</code> 结尾的事件
$(document).off('.myPlugin');</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.trigger()</code></td>
            <td>
              <p>触发指定的事件。具体用法见下方示例：</p>
              <pre><code class="language-js">// 触发指定的事件
$('.box').trigger('click');

// 触发事件时传入参数
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">AJAX <a class="anchor" id="jq-ajax"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tr>
            <td><code>$.ajaxSetup()</code></td>
            <td>
              <p>为 Ajax 请求设置全局配置参数。</p>
              <pre><code class="language-js">$.ajaxSetup({
  // 默认禁止触发全局 AJAX 事件
  global: false,

  // 默认使用 POST 请求
  method: 'POST'
});</code></pre>
              <p>详细参数列表见下方的 <a href="#jq-ajax-options">AJAX 参数</a>。</p>
            </td>
          </tr>
          <tr>
            <td><code>$.ajax()</code></td>
            <td>
              <p>发送 AJAX 请求，返回 Promise。</p>
              <pre><code>$.ajax({
  method: 'POST',
  url: './test.php',
  data: {
    key1: 'val1',
    key2: 'val2'
  },
  success: function (data) {
    console.log(data);
  }
});</code></pre>
              <p>详细参数列表见下方的 <a href="#jq-ajax-options">AJAX 参数</a>。</p>
            </td>
          </tr>
          <tr>
            <td><code>.ajaxStart()</code></td>
            <td>
              <p>全局 AJAX 事件。</p>
              <p>AJAX 请求开始时执行函数。</p>
              <pre><code class="language-js">$(document).ajaxStart(function (event, xhr, options) {
  // xhr: XMLHttpRequest 对象
  // options: AJAX 请求的配置参数
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.ajaxSuccess()</code></td>
            <td>
              <p>全局 AJAX 事件。</p>
              <p>AJAX 请求成功时执行函数。</p>
              <pre><code class="language-js">$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: XMLHttpRequest 对象
  // options: AJAX 请求的配置参数
  // data: AJAX 请求返回的数据
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.ajaxError()</code></td>
            <td>
              <p>全局 AJAX 事件。</p>
              <p>AJAX 请求发生错误时执行函数。</p>
              <pre><code class="language-js">$(document).ajaxError(function (event, xhr, options) {
  // xhr: XMLHttpRequest 对象
  // options: AJAX 请求的配置参数
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.ajaxComplete()</code></td>
            <td>
              <p>全局 AJAX 事件。</p>
              <p>AJAX 请求完成时执行函数。</p>
              <pre><code class="language-js">$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: XMLHttpRequest 对象
  // options: AJAX 请求的配置参数
});</code></pre>
            </td>
          </tr>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">AJAX 参数 <a class="anchor" id="jq-ajax-options"></a></h2>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <thead>
          <tr>
            <th>参数名</th>
            <th>参数类型</th>
            <th>默认值</th>
            <th>描述</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td><code>url</code></td>
            <td><code>String</code></td>
            <td>当前页面的 URL。</td>
            <td>请求的 URL 地址。</td>
          </tr>
          <tr>
            <td><code>method</code></td>
            <td><code>String</code></td>
            <td><code>GET</code></td>
            <td>
              <p>请求方式。</p>
              <p>包括：GET、POST、PUT、PATCH、HEAD、OPTIONS、DELETE</p>
            </td>
          </tr>
          <tr>
            <td><code>data</code></td>
            <td><code>any</code></td>
            <td><code>''</code></td>
            <td>发送到服务器的数据。</td>
          </tr>
          <tr>
            <td><code>processData</code></td>
            <td><code>Boolean</code></td>
            <td><code>true</code></td>
            <td>是否把传递进来的数据转换成查询字符串发送。</td>
          </tr>
          <tr>
            <td><code>async</code></td>
            <td><code>Boolean</code></td>
            <td><code>true</code></td>
            <td>是否为异步请求。</td>
          </tr>
          <tr>
            <td><code>cache</code></td>
            <td><code>Boolean</code></td>
            <td><code>true</code></td>
            <td>是否从缓存中读取。只对 GET、HEAD 请求有效。</td>
          </tr>
          <tr>
            <td><code>username</code></td>
            <td><code>String</code></td>
            <td><code>''</code></td>
            <td>HTTP 访问认证的用户名。</td>
          </tr>
          <tr>
            <td><code>password</code></td>
            <td><code>String</code></td>
            <td><code>''</code></td>
            <td>HTTP 访问认证的密码。</td>
          </tr>
          <tr>
            <td><code>headers</code></td>
            <td><code>Object</code></td>
            <td><code>{}</code></td>
            <td>
              <p>添加到 Headers 中的数据。可以在 <code>beforeSend</code> 回调函数中重写该值。</p>
              <p>值为字符串或 <code>null</code> 的字段会被发送，值为 <code>undefined</code> 的字段会被移除。</p>
            </td>
          </tr>
          <tr>
            <td><code>xhrFields</code></td>
            <td><code>Object</code></td>
            <td><code>{}</code></td>
            <td>
              <p>设置在 XMLHttpRequest 对象上的数据。</p>
              <pre><code class="language-js">$.ajax({
  url: '一个跨域 URL',
  xhrFields: {
    withCredentials: true
  }
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>statusCode</code></td>
            <td><code>Object</code></td>
            <td><code>{}</code></td>
            <td>
              <p>HTTP 状态码和函数组成的对象。</p>
              <pre><code class="language-js">$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('返回状态码为 404 时被调用');
    },
    200: function (data, textStatus, xhr) {
      alert('返回状态码为 200 时被调用');
    }
  }
});</code></pre>
              <p>状态码在 200 - 299 之间、或状态码为 304 时，表示请求成功，函数参数和 <code>success</code> 回调的参数相同；否则表示请求失败，函数参数和 <code>error</code> 回调的参数相同。</p>
            </td>
          </tr>
          <tr>
            <td><code>dataType</code></td>
            <td><code>String</code></td>
            <td><code>text</code></td>
            <td>
              <p>服务器返回的数据类型。</p>
              <p>包括：text、json</p>
            </td>
          </tr>
          <tr>
            <td><code>contentType</code></td>
            <td><code>String</code></td>
            <td><code>application/x-www-form-urlencoded</code></td>
            <td>内容的编码类型。为 <code>false</code> 时将不设置 Content-Type。</td>
          </tr>
          <tr>
            <td><code>timeout</code></td>
            <td><code>Number</code></td>
            <td><code>0</code></td>
            <td>请求的超时时间（毫秒）。为 <code>0</code> 时表示永不超时。</td>
          </tr>
          <tr>
            <td><code>global</code></td>
            <td><code>Boolean</code></td>
            <td><code>true</code></td>
            <td>是否触发全局 AJAX 事件。</td>
          </tr>
          <tr>
            <td><code>beforeSend</code></td>
            <td><code>Function</code></td>
            <td></td>
            <td>
              <p>在请求发送之前调用。返回 <code>false</code> 时将取消 AJAX 请求。</p>
              <pre><code class="language-js">$.ajax({
  beforeSend: function (xhr) {
    // xhr 为 XMLHttpRequest 对象
  }
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>success</code></td>
            <td><code>Function</code></td>
            <td></td>
            <td>
              <p>请求成功之后调用。</p>
              <pre><code class="language-js">$.ajax({
  success: function (data, textStatus, xhr) {
    // data 为 AJAX 请求返回的数据
    // textStatus 为包含成功代码的字符串
    // xhr 为 XMLHttpRequest 对象
  }
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>error</code></td>
            <td><code>Function</code></td>
            <td></td>
            <td>
              <p>请求出错时调用。</p>
              <pre><code class="language-js">$.ajax({
  error: function (xhr, textStatus) {
    // xhr 为 XMLHttpRequest 对象
    // textStatus 为包含错误代码的字符串
  }
});</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>complete</code></td>
            <td><code>Function</code></td>
            <td></td>
            <td>
              <p>请求完成之后调用。</p>
              <pre><code class="language-js">$.ajax({
  complete: function (xhr, textStatus) {
    // xhr 为 XMLHttpRequest 对象
    // textStatus 为一个包含成功或错误代码的字符串
  }
});</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <h2 class="chapter-title mdui-text-color-theme">更多常用方法 <a class="anchor" id="jq-other"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <p>注意：下面这些方法只在 MDUI 框架中存在，若你直接使用 <a href="https://github.com/zdhxiong/mdui.jq" target="_blank">mdui.jq 库</a>，则不存在这些方法。</p>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <tbody>
          <tr>
            <td><code>.reflow()</code></td>
            <td>
              <p>强制重绘当前元素。</p>
              <pre><code class="language-js">$('.box').reflow();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.transition()</code></td>
            <td>
              <p>设置当前元素的 <code>transition-duration</code> 属性。</p>
              <p>可以是带单位的时间值，也可以不带单位。若不带单位，则将自动添加 <code>ms</code> 作为单位。</p>
              <pre><code class="language-js">$('.box').transition(100);</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.transitionEnd()</code></td>
            <td>
              <p>在当前元素上添加 transitionend 事件回调。</p>
              <p>回调函数的参数为 <code>transitionend</code> 事件对象，函数中的 <code>this</code> 指向当前元素。</p>
              <pre><code class="language-js">$('.box').transitionEnd(function () {
  console.log('.box 元素的 transitionend 事件已触发');
})</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.transform()</code></td>
            <td>
              <p>设置当前元素的 <code>transform</code> 属性。</p>
              <pre><code class="language-js">$('.box').transform('rotate(90deg)')</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.transformOrigin()</code></td>
            <td>
              <p>设置当前元素的 <code>transform-origin</code> 属性。</p>
              <pre><code class="language-js">$('.box').transformOrigin('top center')</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>.mutation()</code></td>
            <td>
              <p>执行在当前元素及其子元素内注册的初始化函数。</p>
              <pre><code class="language-js">$('[mdui-collapse]').mutation()</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.showOverlay()</code></td>
            <td>
              <p>创建并显示遮罩，返回遮罩层的 JQ 对象。</p>
              <p>可以传入一个整数参数，表示遮罩层的 <code>z-index</code> 样式，默认为 <code>2000</code>。</p>
              <pre><code class="language-js">$.showOverlay();</code></pre>
              <button id="show-overlay" class="mdui-btn mdui-color-theme-accent mdui-ripple">显示遮罩，2 秒后自动隐藏
              </button>
            </td>
          </tr>
          <tr>
            <td><code>$.hideOverlay()</code></td>
            <td>
              <p>隐藏遮罩层。</p>
              <p>如果调用了多次 <code>$.showOverlay()</code> 来显示遮罩层，则也需要调用相同次数的 <code>$.hideOverlay()</code> 才能隐藏遮罩层。可以通过传入参数 <code>true</code> 来强制隐藏遮罩层。</p>
              <pre><code class="language-js">$.hideOverlay();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.lockScreen()</code></td>
            <td>
              <p>锁定屏页面，禁止页面滚动。</p>
              <pre><code class="language-js">$.lockScreen();</code></pre>
              <button id="lock-screen" class="mdui-btn mdui-color-theme-accent mdui-ripple">锁定屏幕，2 秒后自动解除锁定
              </button>
            </td>
          </tr>
          <tr>
            <td><code>$.unlockScreen()</code></td>
            <td>
              <p>解除页面锁定。</p>
              <p>如果调用了多次 <code>$.lockScreen()</code> 来显示遮罩层，则也需要调用相同次数的 <code>$.unlockScreen()</code> 才能隐藏遮罩层。可以通过传入参数 <code>true</code> 来强制隐藏遮罩层。</p>
              <pre><code class="language-js">$.unlockScreen();</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.throttle()</code></td>
            <td>
              <p>函数节流。</p>
              <p>传入一个函数作为参数，函数的第一个参数是执行的函数，第二个参数是延迟时间，单位为毫秒。</p>
              <pre><code class="language-js">$.throttle(function () {
  console.log('这个函数最多 100ms 执行一次');
}, 100)</code></pre>
            </td>
          </tr>
          <tr>
            <td><code>$.guid()</code></td>
            <td>
              <p>生成一个全局唯一的 ID。</p>
              <pre><code class="language-js">$.guid();</code></pre>
              <p>可以传入一个参数。当该参数值对应的 guid 不存在时，会生成一个新的 guid，并返回；当该参数对应的 guid 已存在，则直接返回已有 guid。</p>
              <pre><code class="language-js">// 下面两行代码返回值相同
$.guid('test');
$.guid('test');</code></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="footer-nav mdui-color-theme">
  <div class="mdui-container">
    <div class="mdui-row">

      <a href="compatibility.html" class="mdui-ripple mdui-color-theme mdui-col-xs-2 mdui-col-sm-6 footer-nav-left">
            <div class="footer-nav-text">
              <i class="mdui-icon material-icons">arrow_back</i>
              <span class="footer-nav-direction mdui-hidden-xs-down">Previous</span>
              <div class="footer-nav-chapter mdui-hidden-xs-down">兼容性</div>
            </div>
          </a>

      <a href="global.html" class="mdui-ripple mdui-color-theme mdui-col-xs-10 mdui-col-sm-6 footer-nav-right">
            <div class="footer-nav-text">
              <i class="mdui-icon material-icons">arrow_forward</i>
              <span class="footer-nav-direction">Next</span>
              <div class="footer-nav-chapter">JavaScript 全局方法</div>
            </div>
          </a>
    </div>
  </div>
</div>
<script src="../../cdn.w3cbus.com/library/mdui/1.0.2/js/mdui.min.js"></script><script src="../../cdn.w3cbus.com/mdui/docs_1/static/index.95ae2041.js"></script>
